<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华彩</title>
    <script src="./cdn/tspartilcles.bundle.min.js"></script>
    <!-- <script src="./cdn/canvas-confetti.js"></script> -->
    <style>
        *{
            box-sizing: border-box;
        }

        html,
        body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: transparent;
        }

        div{
            width: 100%;
            height: 100%;
            /* border: 1px solid red; */
        }
    </style>
</head>
<body>
    <!-- <div></div> -->
</body>
<script type="module" async>
    let initialImageData = null, canvas = null, clearIntervalFrame = null, isAnimation = false;


    let mapParam = (param) => {
        if(Array.isArray(param)){
            return param.map(item => {

                let obj = {
                    ...item,
                    shapes: [ item.shape ],
                    shapeOptions: {
                        emoji: {
                            value: item.emoji ? [...item.emoji] : [],
                        },
                    }, 
                }
                if(item?.colors && !item.colors.length){
                    delete obj.colors
                }
                if(item.shape){
                    delete obj.shape
                }else{
                    delete obj.shapes
                    delete obj.shape
                }
                if(item.emoji){
                    delete obj.emoji
                }else{
                    delete obj.shapeOptions
                    delete obj.emoji
                }
                return obj
            })
        }else{
            let obj = {
                ...param,
                shapes: [ param.shape ],
                shapeOptions: {
                    emoji: {
                        value: param.emoji ? [...param.emoji] : [],
                    },
                }, 
            }
            if(param?.colors && !param.colors.length){
                delete obj.colors
            }
            if(param.shape){
                delete obj.shape
            }else{
                delete obj.shapes
                delete obj.shape
            }
            if(param.emoji){
                delete obj.emoji
            }else{
                delete obj.shapeOptions
            }
            return obj
        }
    }


    window.ipcRenderer.on('launch', async (event, param) => {
        isAnimation = true;
        param = mapParam(param)
        console.log(param);
        
        if(Array.isArray(param)){
            param.forEach(item => {
                confetti(item).then((bool) => {
                    if(!bool)return
                    canvas = document.querySelector('#confetti canvas')
                })
            })
        }else{
            confetti(param).then(() => {
                canvas = document.querySelector('#confetti canvas')
            })
        }

        if(clearIntervalFrame)return;
        clearIntervalFrame = setIntervalFrame(inspectAnimation, 500)
    });

    const inspectAnimation = () => {
        let imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height)
        let bool = imageData.data.every((item, index) => item ===  (initialImageData ? initialImageData?.data[index] : null))
        console.log(bool);
        
        if(bool){
            clearIntervalFrame && clearIntervalFrame();
            clearIntervalFrame = null;
            window.utools.sendToParent('end');
            window.close();
        }
        initialImageData = imageData;
    }

    const setIntervalFrame = (fn, delay) => {
        let myReq;
        let timer = new Date().getTime();
        let handle = ()=>requestAnimationFrame(()=>{
            if(new Date().getTime() - timer > delay){
                fn();
                timer = new Date().getTime();
            }
            myReq = handle();
        })

        myReq = handle();
        return () => cancelAnimationFrame(myReq);
    }

    
</script>
</html>